<template>
	<view class="preview_package_container">
		<view class="preview_package_box">
			<view class="">
				<u-swiper :list="swiperList" height="220"></u-swiper>
			</view>

			<view class="preview_tab_box">
				<view class="preview_tab_all" :class="[isActive == item.id ? 'preview_tab_all_active' : '']"
					v-for="item in previewTabList" :key="item.id" @click="handleTab(item)">
					{{item.name}}
				</view>
			</view>

			<view class="package_list_box">
				<view class="package_list_all" v-for="(item, index) in packageList" :key="index">
					<view class="package_arrow_box">
						<image src="/static/my/shoppingCart/icon-arrow-one.png" mode="" class="package_arrow_img"
							v-if="index == 0"></image>
						<image src="/static/my/shoppingCart/icon-arrow-two.png" mode="" class="package_arrow_img"
							v-else-if="index == 1"></image>
						<image src="/static/my/shoppingCart/icon-arrow-three.png" mode="" class="package_arrow_img"
							v-else-if="index == 2"></image>
					</view>

					<view class="package_title">
						{{item.name}}
					</view>

					<view class="package_details_box">
						<view class="details_img_box">
							<image :src="item.cover_img" mode="" class="details_img"></image>
						</view>
						<view class="details_content_box">
							<view class="details_tip">
								{{item.mini_text}}
							</view>
							<view class="details_number_box">
								<view class="details_number_all">
									<view class="details_number">
										{{item.data_quota}}
									</view>
									<view class="details_name">
										流量额度
									</view>
								</view>

								<view class="details_number_line"></view>

								<view class="details_number_all">
									<view class="details_number">
										{{item.call_duration}}
									</view>
									<view class="details_name">
										通话时长
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="details_highlights_box">
						<view class="details_highlights">
							{{item.bright}}
						</view>
						<!-- <view class="details_btn" @click="handleFreeReceive">
							免费领取
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/6683621779dfa_1719886359.png',
					'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836228adfe0_1719886376.png',
				],
				previewTabList: [{
						id: '',
						name: '全部'
					},
					{
						id: 1,
						name: '移动'
					},
					{
						id: 2,
						name: '联通'
					},
					{
						id: 3,
						name: '电信'
					},
					{
						id: 4,
						name: '广电'
					},
				],
				isActive: '',
				packageList: [],
				queryParams: {
					pageNow: 1,
					pageSize: 10
				},
				total: null
			}
		},
		onReachBottom() {
			if (this.queryParams.pageNow < this.total) {
				this.queryParams.pageNow++
				this.getShoppingCart()
			} else if (this.queryParams.pageNow == this.total) {
				uni.showToast({
					title: '到底啦',
					icon: 'none'
				})
				return
			}
		},
		onLoad() {
			this.packageList = []
			this.getShoppingCart()
			if (this.queryParams.pageNow == this.total) {
				return
			}
		},
		methods: {
			// 已上架产品列表接口
			getShoppingCart() {
				this.$request('/api/getShoppingCart', {
					user_id: uni.getStorageSync('userInfo').id,
					is_agent: uni.getStorageSync('h5-isAgent'),
					is_upload: 1,
					operator_id: this.isActive,
					page_now: this.queryParams.pageNow,
					page_size: this.queryParams.pageSize
				}, 'GET').then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.packageList.push(item)
						})
						this.total = res.page_info.page_count
					} else {
						uni.showToast({
							title: '获取套餐列表失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 切换tab
			handleTab(val) {
				this.isActive = val.id
				this.packageList = []
				this.queryParams.pageNow = 1
				this.getShoppingCart()
			},

			// 免费领取
			handleFreeReceive() {
				uni.navigateTo({
					url: '/pages/my/noMiniSource/noMiniSource'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.preview_package_container {
		padding: 17rpx 18rpx 0;

		.preview_package_box {

			.preview_tab_box {
				display: flex;
				justify-content: space-between;
				padding: 25rpx 0 28rpx;

				.preview_tab_all {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 122rpx;
					height: 56rpx;
					background: #FFFFFF;
					box-shadow: 0px 7rpx 8rpx 0px rgba(224, 224, 224, 0.77);
					border-radius: 28rpx;
					font-family: all-font;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.preview_tab_all_active {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 122rpx;
					height: 56rpx;
					background: linear-gradient(181deg, #5685ED, #4AC2FE);
					box-shadow: 0px 7rpx 8rpx 0px rgba(83, 146, 241, 0.4);
					border-radius: 28rpx;
					font-family: all-font;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.package_list_box {
				padding-top: 20rpx;

				.package_list_all {
					position: relative;
					background: #FFFFFF;
					box-shadow: 0px 14rpx 5rpx 0px rgba(242, 242, 242, 0.39);
					border-radius: 10rpx;
					padding: 27rpx 33rpx 32rpx 24rpx;
					margin-bottom: 32rpx;

					.package_arrow_box {
						position: absolute;
						top: -6rpx;
						right: 0;

						.package_arrow_img {
							width: 100rpx;
							height: 100rpx;
						}
					}

					.package_title {
						width: 451rpx;
						font-family: all-font;
						font-weight: 500;
						font-size: 32rpx;
						color: #262626;
						margin-bottom: 30rpx;
						display: -webkit-box;
						/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
						-webkit-line-clamp: 1;
						/* 控制显示的行数 */
						-webkit-box-orient: vertical;
						/* 垂直方向布局 */
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
					}

					.package_details_box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.details_img_box {
							width: 212rpx;
							height: 212rpx;

							.details_img {
								width: 100%;
								height: 100%;
								border-radius: 15rpx;
							}
						}

						.details_content_box {
							width: 405rpx;

							.details_tip {
								font-family: all-font;
								font-weight: 400;
								font-size: 26rpx;
								color: #4D4D4D;
								line-height: 38rpx;
								display: -webkit-box;
								/* 对于旧版本的 Safari, Chrome, 和 Android 浏览器 */
								-webkit-line-clamp: 2;
								/* 控制显示的行数 */
								-webkit-box-orient: vertical;
								/* 垂直方向布局 */
								overflow: hidden;
								/* 隐藏溢出的内容 */
								text-overflow: ellipsis;
							}

							.details_number_box {
								display: flex;
								justify-content: space-evenly;
								align-items: center;
								padding: 20rpx 0 0;

								.details_number_all {
									display: flex;
									flex-direction: column;
									align-items: center;

									.details_number {
										font-family: my-font;
										font-weight: bold;
										font-size: 29rpx;
										color: #262626;
										padding-bottom: 8rpx;
									}

									.details_name {
										font-family: all-font;
										font-weight: 400;
										font-size: 24rpx;
										color: #808080;
									}
								}

								.details_number_line {
									width: 2rpx;
									height: 31rpx;
									background: #E61B15;
									border: 2rpx solid #E6E6E6;
								}
							}
						}
					}

					.details_highlights_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 22rpx;

						.details_highlights {
							font-family: all-font;
							font-weight: 400;
							font-size: 26rpx;
							color: #4D4D4D;
						}

						.details_btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 187rpx;
							height: 57rpx;
							background: linear-gradient(179deg, #FF6D6E, #FF1D1F);
							box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
							border-radius: 29rpx;
							font-family: all-font;
							font-weight: 500;
							font-size: 27rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>